<template>
  <BasicModal v-bind="$attrs" @register="registerModal" show-footer width="80%">
    <template #footer>
      <!--          <a-button @click="closeModal" :loading="btnLoading">取消222</a-button>-->
      <!--          <a-button-->
      <!--            type="primary"-->
      <!--            @click="handleSubmit(false)"-->
      <!--            :loading="btnLoading"-->
      <!--          >保存</a-button-->
      <!--          >-->
    </template>
    <Collapse
      v-model:activeKey="activeKey"
      :bordered="false"
      @change="change(e)"
    >
      <CollapsePanel key="1" header="开票明细">
        <Descriptions
          bordered
          :column="2"
          :contentStyle="{ width: '400px', height: '20px' }"
        >
          <DescriptionsItem
            label="发票号"
            :contentStyle="{ color: 'red', 'font-weight': 'bold' }"
            >{{ formData.billNo }}</DescriptionsItem
          >
          <DescriptionsItem
            label="发票金额"
            :contentStyle="{ color: 'red', 'font-weight': 'bold' }"
            >¥{{ formData.amount }}</DescriptionsItem
          >
          <DescriptionsItem label="发票性质">纸质发票</DescriptionsItem>
          <DescriptionsItem label="发票状态">{{
            formData.status == '0'
              ? '待开'
              : formData.status == '1'
                ? '已开'
                : formData.status == '2'
                  ? '已领取'
                  : '未知'
          }}</DescriptionsItem>
          <DescriptionsItem label="发票类型">{{
            formData.type == '0'
              ? '增值税普通发票'
              : formData.type == '1'
                ? '增值税专用发票'
                : ''
          }}</DescriptionsItem>
          <DescriptionsItem label="发票抬头">{{
            formData.companyName
          }}</DescriptionsItem>
          <DescriptionsItem label="税务登记证号">{{
            formData.taxRegistryNumber
          }}</DescriptionsItem>
          <DescriptionsItem label="基本开户银行名称">{{
            formData.bank
          }}</DescriptionsItem>
          <DescriptionsItem label="基本开户账号">{{
            formData.bankAccount
          }}</DescriptionsItem>
          <DescriptionsItem label="注册场所地址">{{
            formData.registeredAddress
          }}</DescriptionsItem>
          <DescriptionsItem label="注册固定电话">{{
            formData.registeredMobile
          }}</DescriptionsItem>
          <DescriptionsItem label="申请时间">{{
            formData.createDate
          }}</DescriptionsItem>
          <DescriptionsItem label="申请人姓名">{{
            formData.name
          }}</DescriptionsItem>
          <DescriptionsItem label="申请人电话">{{
            formData.mPhone
          }}</DescriptionsItem>
          <DescriptionsItem label="电费">{{
            formData.powerAmount
          }}</DescriptionsItem>
          <DescriptionsItem label="服务费">{{
            formData.serviceAmount
          }}</DescriptionsItem>
          <DescriptionsItem label="停车费">{{
            formData.parkAmount
          }}</DescriptionsItem>
          <DescriptionsItem label="超时占桩费">{{
            formData.pileTimeoutAmount
          }}</DescriptionsItem>
          <!--          <DescriptionsItem label="发票金额" DescriptionsItem>{{ formData.amount }}</DescriptionsItem>-->
          <DescriptionsItem label="邮箱">{{ formData.email }}</DescriptionsItem>
          <DescriptionsItem label="开票类型">{{
            formData.bileType
          }}</DescriptionsItem>
          <DescriptionsItem label="备注">{{ formData.memo }}</DescriptionsItem>
        </Descriptions>
      </CollapsePanel>
      <CollapsePanel key="2" header="关联订单/账单">
        <BasicTable
          @register="registerTable"
          @resize-column="handleResizeColumn"
          :canResize="false"
          :scroll="{ x: 'max-content' }"
        />
      </CollapsePanel>
    </Collapse>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {
  Collapse,
  CollapsePanel,
  Descriptions,
  DescriptionsItem,
} from 'ant-design-vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { defHttp } from '@/utils/http/axios';
import { BasicTable, useTable } from '@/components/Table';
import { orderColumns } from '@/views/admin/bill/data';
const emit = defineEmits(['success', 'register']);
const activeKey = ref('1');
const { createMessage } = useMessage();
// const [
//   registerTable,
//   {  setTableData },
// ] = useTable({
//   //title: '列表',
//   api: '/admin/bill/list',
//   columns: orderColumns,
//   showIndexColumn: true,
//   useSearchForm: false,
//   indexColumnProps: {
//     fixed: 'left',
//   },
//   // pagination: true,
//   bordered: true,
//   rowKey: 'id',
// });

const [registerTable, { getDataSource, setTableData }] = useTable({
  columns: orderColumns,
  showIndexColumn: false,
  showTableSetting: false,
  rowKey: 'id',

  // scroll: { y: '100%' },
});
// 文档名称
const formData = ref({
  billNo: '',
  amount: '',
  status: '',
  type: '',
  companyName: '',
  taxRegistryNumber: '',
  bank: '',
  bankAccount: '',
  registeredAddress: '',
  registeredMobile: '',
  createDate: '',
  name: '',
  mPhone: '',
  powerAmount: '',
  serviceAmount: '',
  parkAmount: '',
  pileTimeoutAmount: '',
  email: '',
  bileType: '',
  memo: '',
});
const [registerModal, { changeLoading }] = useModalInner(async (data) => {
  getFormData(data.id);
});
function change() {
  // if (activeKey.value == '1') {
  //   activeKey.value = '2';
  // } else if (activeKey.value == '2') {
  //   activeKey.value = '1';
  // }
}
async function getFormData(id) {
  debugger;
  changeLoading(true);
  const res = await defHttp.get({
    url: '/admin/bill/detail?id=' + id,
  });
  if (res) {
    debugger;
    formData.value = res.bill;
    // setTableData([]);
    changeLoading(false);
  }
}
</script>
